<template>
  <el-dialog draggable :close-on-click-modal="false" class="pc-temp-model" width="400px" v-model="isVisible" @close="onCancelModel" append-to-body>
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">文件目录</h4>
    </template>
    <div class="pc-temp-model_content">
        <WidgetForm ref="folderFormRef" :form-fields="dialog.formFields" />
    </div>
    <template #footer>
       <span class="dialog-footer">
          <el-button @click="onCancelModel">关闭</el-button>
          <el-button type="primary" :loading="isLoading" @click="onSave">保存</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {Close as IconClose, UploadFilled as IconUploadFilled, WarningFilled} from "@element-plus/icons-vue"
import {defineEmits, defineExpose, onBeforeMount, reactive, ref, computed} from "vue"
import {
  ElButton,
  ElDialog,
  ElIcon,
  ElInput, ElLink,
  ElMessage,
  ElTable,
  ElTableColumn, ElTooltip,
  ElUpload,
  UploadFile,
  UploadFiles
} from "element-plus"
import {ResourceModel} from "@/model/ResourceModel";
import ResourceApi from "@/api/broadcast/resource";
import WidgetForm from "@/components/widget/WidgetForm.vue";
import {WidgetFormField} from "@/model/Definition";
import {BaseModel} from "@/model/BaseModel";

const isVisible = ref(false)
const isLoading = ref(false)
const originData = ref<ResourceModel>()
let currentDeptId = null
const folderFormRef = ref()


const $emit = defineEmits({
    saveSuccess: (temp: ResourceModel) => temp
})

const props = defineProps({
    folderId: {
        type: String,
        required: true,
        default: null
    }
})

const dialog = reactive<{formFields: WidgetFormField[],modelInstance?: BaseModel, saveApiFun?: any, updateApiFun?: any}>({
    formFields: [
        {field: 'name', label: '目录名称', type: 'text', placeholder: '请输入名称', required: [{required: true, message: '名称不能为空', trigger: 'blur'}]},
        {field: 'description', label: '描述', type: 'text', placeholder: '请输入描述'},
    ]
})

const onCancelModel = () => {
    isVisible.value = false
    folderFormRef.value.resetFields()
}


const onShowModel = (deptId: string) => {
    currentDeptId = deptId
    isVisible.value = true
}

defineExpose({
  onShowModel
})

const onSave = () => {
    folderFormRef.value.validateForm((valid) => {
        if (valid) {
            const formData = folderFormRef.value.getFormFieldValue()
            ResourceApi.createFolder(props.folderId || "", formData.name, formData.description, currentDeptId).then((data) => {
                ElMessage.success({
                    message: '目录创建成功',
                    showClose: true,
                })
                $emit('saveSuccess', data)
                onCancelModel()
            })
        }
    })

}


</script>

<style scoped lang="scss">
  .pc-temp-model {
    &_content {
      padding: 15px;
    }
  }

</style>
<style lang="scss">
.pc-temp-model—-upload {
  .el-upload-dragger {
    padding: 5px!important;
    .el-icon--upload {
      font-size: 45px;
      margin-bottom: 0px;
    }
  }
}
</style>
